<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <script>
 const listOfIngredients = [];
  const something = (num) => {
    const p = new Promise((res,rej)=>{
      setTimeout(()=>{
        res(num)
      }, 1000)
    }).then(res =>{
      listOfIngredients.push(num);
    })
    return p
  }

 const P = new Promise((resolve, reject)=>{
  const num = Math.random()
    setTimeout(() => {
      resolve(num) // 
    },1000)
  }) 

  // 如果return的是promise 后面的 then 需要等待 因为我的需要左侧的p又确定的状态 但是return und===> p是成功的
  // 注意回调以及函数本身都需要 return 不然会因为undefined 导致 后面的then先执行
  P.then((num) => {
    return something(num);
  })
  .then((result) => { 
    console.log('something first', listOfIngredients);
  });


  // 
  const listOfIngredients2 = []

  const P2 = new Promise((resolve, reject)=>{
    const num = Math.random()
      setTimeout(() => {
        resolve(num) // 
      },1000)
   }) 

  const something2 = (num) => {
    const p = new Promise((res,rej)=>{
      setTimeout(()=>{
        res(num)
      }, 1000)
    }).then(res =>{
      listOfIngredients2.push(num);
    })
  }

  P2.then((num) => {
    something2(num);
  })
  .then((result) => { 
    console.log('something2', listOfIngredients2);
  });

  </script>


<script>
    console.log('-------------------------------------------------------');

</script>
<script>
    setTimeout(() => {        
      console.log('0');       
    });
    new Promise((resolve, reject) => {
      console.log('1');     
      resolve();
    }).then(() => {             
      console.log('2');  
      // 添加return      5 比6 先进队列
       new Promise((resolve, reject) => {
        console.log('3');     
        resolve();
      }).then(() => {          
          console.log('4');     //微队列2执行完后，执行微队列3，控制台输出 1 7 2 3 8 4
        }).then(() => {        
          console.log('5');     //微队列4执行完，执行微队列5，控制台输出 1 7 2 3 8 4 6 5
        })
      })
      // 这个then 入队列的前提是 左面的promise 状态变化 但并不是说要等待所有的回调执行 我不需要等 我要的只是状态变化
      // 你啥也不return 那我就结束了 但是 如果你return promise 那我只能等
      // 你可以发现 then前面的东西没有retrun 这个就会先进 否则需要等到then之前的执行完
      .then((res) => {
        console.log('6', res) // undefined
    })
      
    new Promise((resolve, reject) => {
      console.log('7');      
      resolve();
    })
    .then(() => {             
      console.log('8');      
    })
    // ：1 7   2 3 8 4 6 5  0
    // !! !!!! 5 6 的顺序不对  6 比5 先进队列 (添加一个return 就可以改变两者的顺序)
    // 执行的前提 主线程空闲 已经在队列中


   //  遇见定时器  浏览器定时模块管理callback 然后瞬间到时间 但是这个时候不会立马执行 主线程还有工作 只是放进宏队列去排队 主线程继续执行
   //  同步执行excutor 此时 p 是成功的 因为状态变化 立马将回调函数推向微队列1（第一个then里的所有code） 主线程继续执行 
   //  遇见下一个then 因为上一个p是没有执行的 我不知道你的情况 这个p是待定的 这个需要左侧的p有结果 此时这个6这个回调挂在在前面的p的实例上 连微队列都没劲 主线程继续执行
   //  又遇见Promise promise  同步执行excutor 因为左侧的p状态成了 立马推向微队列2
   //  注意此时这些微任务是执行第一个任务产生的



   //  主线程结束 event-loop 从微任务队列抽取任务放进主线程
   //  执行微队列1， 又遇见Promise 立即将4推微队列(3) 之后的then 也是挂在在实例上 因为4没执行 状态没变 不会进队列
   // !!!!!
   //  微队列1执行结束 可以将6推微队列(4)
   //  执行微队列(4)

   //  执行微队列2  执行微队列(3) 将5 推微队列(5)  
   //  执行微队列5 
   
   //  没有微任务 将宏队列中的任务拉到主线程执行
   //  结束
  
     
   //  
</script>

</body>
</html>
<!-- 
 const P = new Promise((resolve, reject)=>{
  const num = Math.random()
    setTimeout(() => {
      resolve(num) // 
    },1000)
  }) 
  
  P.then((num) => {
    console.log('1111', num);
  },(res)=>{
    console.log('22', res);
  })
    调用promise 构造函数 传递excutor函数
    想要执行函数 函数一定是要入栈的 对于异步任务
    比如 setTimeout 事件没到之前是浏览器定时模块帮助你管理 时间到了帮你推入队列 注意没有入栈
    需要排队 等待主线程忙完(执行栈空闲) 
    setTimeout 其实是瞬间就调用完毕 只是这个回调被浏览器定时模块管理 时间到了帮你推入队列
    then函数也是立马就执行结束 这两个回调立马被放入微任务队列（是这个promise自己的身上就有一个类似于list的结构用于存储这两个函数）
    并没有推向队列 需要这个p的状态有所变化 才会推入队列然后执行（至于推那个函数看p的状态）
    为啥不推向队列，是因为我还不知这个priomise的状态，知道后才会推，然后等待调用执行
    一旦 setTimeout里的函数执行 priomise的状态变化 立即把自己缓存的会回调推入队列
    这个例子里： 是先指定的回调 而后修改的状态 ettimeout）
  const P = new Promise((resolve, reject)=>{
    const num = Math.random()
    resolve(num) 
      
    }) 
  
  P.then((num) => {
    console.log('1111', num);
  },(res)=>{
    console.log('22', res);
  })
  这里是是先修改的状态  而后指定的回调  这个回调就不用挂在自身上了 会立马推入队列
 -->